<template>
  <view class="pages">
    <u-sticky
      class="sticky_c"
      offsetTop="0"
      :style="{ backgroundColor: scrollBgc ? '#EDE7FF' : '#EDE7FF' }"
    >
      <h-line :height="statusHeight + 20"></h-line>
      <view class="navbar">
        <view class="nav_b">
          <u-icon name="arrow-left" size="22" color="#333" @click="goBack"></u-icon>
        </view>
        <view class="page_title">产检记录</view>
        <view class="nav_right"> </view>
      </view>
      <h-line height="13"></h-line>
    </u-sticky>
    <view class="report_list" v-for="(item, index) in prenatalList" :key="index">
      <view class="report_list_top">
        <view class="report_list_title">
          <text class="report_title_name">{{ item.name }}</text>
          <view class="antenatal_main">
            <view>必查项目：</view>
            <view v-if="item.type == 0" class="antenatal_main_item">
              <text v-for="(i, n) in item.bcxm_cate" :key="n">{{ i }}</text>
            </view>
            <view class="antenatal_main_item" v-if="item.type == 1">
              <text v-for="(i, n) in item.user_cate" :key="n">{{ i.name }}</text>
            </view>
          </view>
        </view>
        <view
          class="report_btn"
          v-if="item.status != 1"
          @click="
            toUploadRecordFn(
              `/pregnancys/index/time-table/record-detail?id=${
                item?.id
              }&isshow=${false}&uid=${uid}`,
            )
          "
        >
          <image src="@/static/yunchan/chat/right.png" mode="scaleToFill" />
        </view>
        <view
          v-else
          class="report_btn"
          @click="toUploadRecordFn(`/pregnancys/index/chat-look-record?id=${item?.id}`)"
        >
          <image src="@/static/yunchan/chat/right.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="report_img" v-if="item.status == 1">
        <text>{{ item.date }}</text>
        <view class="report_img_list">
          <image v-for="(i, n) in item.cj_report" :key="n" :src="i" mode="aspectFill" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMemberStore } from '@/stores'
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app'
import { navigateBack, navigateTo } from '@/utils'
import { getPrenatalExamination, getAntenatalUserinfo, getsendred } from '@/api/pregnancy/index'
const userStore = useMemberStore()
const scrollBgc = ref(false)

const statusHeight = ref()
//记录列表
const prenatalList = ref([])
const uid = ref()
onLoad((options) => {
  console.log(options.ids)
  getPrenatalList(options?.ids, options?.uid)
  uid.value = options?.uid
})
onShow(() => {
  uni.getSystemInfo({
    success: (e) => {
      statusHeight.value = e?.statusBarHeight * 2
    },
  })
})
//获取列表
async function getPrenatalList(i, uid) {
  const res = await getsendred({ ids: i, uid })
  if (res.code == 200) {
    res.data.data.forEach((item) => {
      if (item.cj_report.length > 3) {
        item.cj_report = item.cj_report.slice(0, 3)
      }
    })
    prenatalList.value = res.data.data
  }
}
//上传报告单
function toUploadRecordFn(url) {
  navigateTo(`${url}`)
}
// 返回
function goBack() {
  navigateBack()
}
function toRecortlist() {
  navigateBack()
}
</script>

<style lang="scss" scoped>
.pages {
  width: 750rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f6f6f6;
  font-family: PingFang-SC-Bold, PingFang-SC;
  padding-bottom: 30rpx;
  .report_list {
    margin-top: 20rpx;
    width: 694rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 22rpx 30rpx 30rpx;
    .report_list_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .report_title_name {
        font-size: 32rpx;
        color: #333333;
        font-weight: 600;
      }
      .antenatal_main {
        display: flex;
        font-size: 26rpx;
        color: #333333;
        margin: 20rpx 0;
        .antenatal_main_item {
          width: 300rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          text {
            margin-right: 10rpx;
          }
        }
      }
      .report_btn {
        width: 10rpx;
        height: 19rpx;
        image {
          width: 10rpx;
          height: 19rpx;
        }
      }
    }
    .report_img {
      text {
        font-size: 24rpx;
        color: #999999;
      }
      .report_img_list {
        width: 643rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        image {
          margin-top: 20rpx;
          margin-right: 20rpx;
          width: 201rpx;
          height: 209rpx;
          display: block;
          border-radius: 16rpx;
        }
        image:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
    .custom-style {
      width: 174rpx;
      height: 46rpx;
      background: #a28aff;
      border-radius: 69rpx 69rpx 69rpx 69rpx;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
      line-height: 46rpx;
    }
  }
}
.sticky_c {
  top: 0 !important;
  background: #ede7ff;
  .navbar {
    padding: 0 24rpx;
    width: 100vw;
    height: 100rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    .page_title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 36rpx;
      color: #333333;
      margin-left: 11rpx;
      margin-right: 20rpx;
      line-height: 100rpx;
      text-align: center;
      flex: 1;
    }
    .nav_b {
      width: 100rpx;
      height: 32rpx;
      padding: 30rpx 0;
    }
    .nav_right {
      display: flex;
      align-items: center;
      width: 50rpx;
      height: 30rpx;
    }
  }
  .round_edge {
    width: 750rpx;
    height: 40rpx;
    background: #f6f6f6;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
  }
}
</style>
